<template>
  <view class="doctor-item">
    <view class="flex-box">
      <view class="cover">
        <img :src="baseUrl + 'doctor.jpg'" alt="" />
      </view>
      <view class="doctor-info">
        <view class="doctor-name-box">
          <view class="doctor-name">{{itemData.doctor_name}}</view>
          <view class="doctor-level">{{itemData.doctor_level}}</view>
        </view>

        <view class="doctor-department">科室: {{itemData.doctor_department}}</view>
      </view>
    </view>

    <view class="forte">擅长: {{itemData.doctor_forte}}</view>
  </view>
</template>

<script>
export default {
  name: "DoctorItem",
  data() {
    return {
      baseUrl: "http://1.15.189.19:3000/public/img/",
    };
  },

  components: {},

  props:{
    itemData:{
      require:true
    }
  }
};
</script>

<style lang='scss' scoped>
.doctor-item {
  padding: 40rpx;
  background: #fff;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.05);
  .flex-box {
    display: flex;
    margin-bottom: 20rpx;
    .cover {
      height: 150rpx;
      width: 150rpx;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .doctor-info {
      margin-left: 30rpx;
      flex: 1;
      .doctor-name-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .doctor-name {
          font-size: 30rpx;
        }
        .doctor-level {
          font-size: 26rpx;
          color: #999;
        }
      }
      .doctor-department {
        font-size: 28rpx;
        color: #666;
        margin-top: 20rpx;
      }
    }
  }

  .forte {
    padding: 10rpx 20rpx 0;
    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
    font-size: 26rpx;
  }
}
</style>